/* 1. 编写一个构造函数 */
function Enlarge(box) {
    /* 
        属性
            先获取大盒子的属性
            根据大盒子的书写获取小盒子的属性
    */
    /* 获取最大的那个盒子 */
    this.box = document.querySelector(box)
    /* 获取蒙版的盒子 */
    this.mask = this.box.querySelector(".show .mask")
    /* 获取show展示图片的盒子 */
    this.showImg = this.box.querySelector(".show img")
    /* 获取放大区域 */
    this.enlarge = this.box.querySelector(".enlarge")
    /* 获取放大图片 */
    this.bigImg = this.enlarge.firstElementChild
    /* 获取小图片列表区域 */
    this.list = this.box.querySelector(".list")

    //获取蒙版尺寸
    this.maskWidht = this.mask.clientWidth
    this.maskHeight = this.mask.clientHeight
    //获取展示盒子的图片的宽高
    this.showImgWidht = this.showImg.clientWidth
    this.showImgHeight = this.showImg.clientHeight
    //获取放大图片的宽高
    this.bigImgWidth = this.bigImg.clientWidth
    this.bigImgHeight = this.bigImg.clientHeight
}

//方法一 调整比例
/* 
    1. 调整比例的公式
        蒙版的宽高       enlarge的宽高
        ---------   =   -------------
        show的宽高      放大图片的宽高
    2. 公式变形
        enlarge的宽高 = 蒙版的宽高 * 放大的图片的宽高 / show的宽高 
    3. 计算enlarge的宽高
    4. 给enlarge赋值
*/
Enlarge.prototype.setScale = function () {
    //计算enlarge的宽高
    this.enlargeWidht = this.maskWidht * this.bigImgWidth / this.showImgWidht
    this.enlargeHeight = this.maskHeight * this.bigImgHeight / this.showImgHeight
    //给enlarge赋值
    this.enlarge.style.width = this.enlargeWidht + 'px'
    this.enlarge.style.height = this.enlargeHeight + "px"
}
//方法二 点击小图片
/* 
    1. 排他思想切换active
        A. 使用事件的委托(事件的委派)给 this.list
        B. 获取点击的是谁 e.target.nodeName === 'IMG' => 图片
        C. 使用排他思想将所有的样式去掉
        D. 给点击的自己添加active样式
    2. 中等图片与大图片要跟随小图片的变化而变化
        A. 将中等图片与大图片的图片路径绑定到图片的标签身上去
        B. 点击的时候,获取小图片身上标签的中等图片路径与大图片路径
        C. 将获取到的路径赋值给大图片的src与中等图片的src
*/
Enlarge.prototype.changeImg = function () {
    // 使用事件的委托(事件的委派)给 this.list
    this.list.addEventListener("click", (e) => {
        //处理事件的兼容
        e = e || window.event;
        //表示点击的儿子是图片
        if (e.target.nodeName === "IMG") {
            // 使用排他思想将所有的样式去掉
            for (let i = 0; i < this.list.children.length; i++) {
                this.list.children[i].classList.remove("active")
            }
            // 给点击的自己添加active样式 => 如何获取自己?
            // console.log(+e.target.dataset.index);
            //获取点击自己绑定的dataset-index => 下标
            let index = +e.target.dataset.index;
            this.list.children[index].classList.add("active")

            // 点击的时候,获取小图片身上标签的中等图片路径与大图片路径
            // console.log(e.target.dataset.m,e.target.dataset.b);

            // 将获取到的路径赋值给大图片的src与中等图片的src
            this.showImg.src = e.target.dataset.m
            this.bigImg.src = e.target.dataset.b
        }
    })
}

//方法三 鼠标移动
/* 
    1. 让蒙版跟随鼠标进行移动
        0. 鼠标在谁身上移动?    在展示的图片身上移动
        A. 获取鼠标在盒子当中坐标
        B. 让蒙版跟随鼠标进行移动了
        C. 将鼠标调到蒙版中间
        D. 边界值判断
    2. 数蒙版与放大区域进行联调
        A.联调公式
                x              mask宽
            ---         =  -------- 
            enlargeMoveX       enlarge宽
        B.公式变形
            enlargeXmoveX = x * enlargeWidht / maskWith
        C.计算大图片移动距离
        D.给大图片移动的top,left赋值
            需要注意的是 取反
*/
Enlarge.prototype.move = function () {
    this.showImg.addEventListener("mousemove", (e) => {
        //处理兼容性
        e = e || window.event;
        //获取鼠标在盒子当中坐标
        let x = e.offsetX;
        let y = e.offsetY

        // 将鼠标调到蒙版中间
        x = x - this.maskWidht / 2
        y = y - this.maskHeight / 2

        // 边界值判断
        if (x < 0) x = 0;
        if (y < 0) y = 0;
        if (x > this.showImgWidht - this.maskWidht) x = this.showImgWidht - this.maskWidht
        if (y > this.showImgHeight - this.maskHeight) y = this.showImgHeight - this.maskHeight

        // 让蒙版跟随鼠标进行移动了
        this.mask.style.top = y + "px"
        this.mask.style.left = x + 'px'


        /* 鼠标移动的联调 */
        // enlargeXmoveX = x * enlargeWidht / maskWith
        let enlargeMoveX = x * this.enlargeWidht / this.maskWidht
        let enlargeMoveY = y * this.enlargeHeight / this.maskHeight

        // 给大图片移动的top,left赋值,取反
        this.bigImg.style.left = -enlargeMoveX + "px"
        this.bigImg.style.top = -enlargeMoveY + 'px'
    })
}

/* 启动引擎 */
Enlarge.prototype.init = function () {
    this.setScale();
    this.changeImg();
    this.move();
}